<template>
  <div class='detail'>
    <header>
      <div
        class='header-returns'
        v-show='isShow'
      >
        <!-- v-if当条件为false时，压根不会有对应的元素在DOM中
v-show当条件为false，仅仅是将元素的display属性设置为none而已 -->
        <div @click='goBack'>
          <i class='iconfont icon-fanhui'></i>
        </div>
        <div>
          <i class="iconfont">&#xe6b1;</i>
        </div>
      </div>

      <div
        class='header-bar'
        v-show='!isShow'
        :style='styleOption'
      >
        <div @click='goBack'>
          <i class='iconfont icon-fanhui'></i>
        </div>
        <div>
          <span>商品详情</span>
          <span>商品评价</span>
        </div>
        <div>
          <i class="iconfont">&#xe6b1;</i>
        </div>
      </div>
    </header>
    <section ref='wrapper'>
      <div>
        <div class='swiper-main'>
          <swiper :options="swiperOption">
            <!--             <swiper-slide
              v-for='(item,index) in swiperList'
              :key='index'
            >
              <img
                :src="item.imgUrl"
                alt=""
              >
            </swiper-slide> -->
            <swiper-slide>
              <img
                :src="goods.swiper1"
                alt=""
              >
            </swiper-slide>
            <swiper-slide>
              <img
                :src="goods.swiper2"
                alt=""
              >
            </swiper-slide>
            <swiper-slide>
              <img
                src="../.././public/images/cxjy.jpeg"
                alt=""
              >
            </swiper-slide>
          </swiper>
          <div class="swiper-pagination"></div>
        </div>
        <div class='goods-name'>
          <h1>{{goods.name}}</h1>
          <div>😽🐯{{goods.content}}🐱🌽</div>
        </div>
        <div class='goods-price'>
          <div class='oprice'>
            <span>¥</span>
            <b>{{goods.price}}</b>
          </div>
          <div class='pprice'>
            <span>价格:</span>
            <del>¥{{goods.price}}</del>
            <!--             <span>&nbsp;</span>
            <span>库存数量</span>
            <b>{{goods.num}}</b>
            <span>欲购从速</span> -->
          </div>
          <div class=' pprice goods-price'>
            <span>库存数量:</span>
            <b>{{goods.num}}</b>
            <span>&nbsp;&nbsp;/福利激活码&nbsp;&nbsp;</span>
            <span>欲购从速</span>
          </div>
        </div>
        <div>
          <div>
            😀简介:<br>
            {{goods.synopsis}}
          </div>
          <div>
            🌞等级:<br>
            {{goods.grade}}
          </div>
          <br>
          <div>
            🦸‍♂️游戏玩法:<br>
            {{goods.detail}}
          </div>
          <br>
          <div>
            🌠资深游戏玩家评论:<br>
            {{goods.comments}}
          </div>
          <br>
          <img
            style='width:100%;height: 500px;'
            :src="goods.imgUrl2"
            alt=""
          >
          <img
            style='width:100%;height: 500px;'
            :src="goods.imgUrl1"
            alt=""
          >
          <img
            style='width:100%;height: 500px;'
            :src="goods.imgUrl2"
            alt=""
          >
        </div>
      </div>
    </section>
    <footer>
      <div
        class='add-cart'
        @click="addCart"
      >加入购物车</div>
      <div>立即购买</div>
    </footer>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
/* import BetterScroll from "better-scroll"; */
import BetterScroll from "@better-scroll/core";
import BScroll from "@better-scroll/core";
//BScroll.use(ObserveDom);
import Indicator from "@/common/api/request.js";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      changValue: null,
      id: 0,
      goods: {},
      styleOption: {},
      BetterScroll: "",
      isShow: true, //显示
      swiperOption: {
        autoplay: 3000,
        speed: 1000,
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
        },
      },
      //sw1: goods.imgUrl,
      swiperList: [
        {
          imgUrl: "./images/goods1.jpg",
          //:src="goods.imgUrl"
          //imgUrl: sw1,
          //imgUrl: "./images/goods1.jpg",
          //imgUrl: this.goods.imgUrl,
        },
        {
          imgUrl: "./images/goods2.jpg",
        },
        {
          imgUrl: "./images/cxjy.jpeg",
        },
      ],
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
  created() {
    //this.id = this.$router.query.id;
    this.getData();
  },
  mounted() {
    setTimeout(() => {
      //修改数据
      this.changValue = 1;
      //DOM还没更新
      this.$nextTick(() => {
        /* movable: true,
          zoom: true,
          mouseWheel: true, */
        //DOM现在更新了
        //this.calculateHeight();
        this.BetterScroll = new BetterScroll(this.$refs.wrapper, {
          probeType: 3,
          ouseWheel: true,
          bounce: false,
          click: true,
        });
        this.BetterScroll.on("scroll", (pos) => {
          let posY = Math.abs(pos.y);
          let opacity = posY / 180;

          opacity = opacity > 1 ? 1 : opacity;

          this.styleOption = {
            opacity: opacity,
          };

          if (posY >= 50) {
            this.isShow = false;
          } else {
            this.isShow = true;
          }
        });
      });
    }, 0);
    /* 使得每次挂载完成时changValue这个属性的值获得改变，然后调用this.$nextTick()就可以更新DOM了。其他例子：如果是第一次打开模态框时无法获取this.$refs,可以让模态框打开时修改一个data对象中的值，然后执行this.$nextTick()就可以更新DOM了。 */
  },
  beforeMount() {},
  //在server/router/index.js
  //<keep-alive>生命周期 keep-alive是一个内置的组件
  activated() {
    //判断id如果一样则不请求，不一样则发送更新请求
    //判断当前url , id和之前id是否一致  //接受从like.vue传过来的值
    if (this.$route.query.id != this.id) {
      this.getData();
      this.id = this.$route.query.id;
    }
  },
  methods: {
    async getData() {
      let id = this.$route.query.id;
      //console.log(id);
      let res = await Indicator.$axios({
        url: "/api/goods/id",
        params: {
          id,
        },
      });
      this.goods = res;
    },
    //加入购物车
    addCart() {
      let id = this.$route.query.id;
      Indicator.$axios({
        url: "/api/addCart",
        method: "post",
        data: {
          goodsId: id,
        },
        //传的是token
        headers: {
          token: true, //验证与不验证
        },
      }).then((res) => {
        //console.log(res);
        if (res.success) {
          //添加成功
          Toast("添加购物车成功");
        } else {
          Toast("网络开小差了,添加购物车失败,请重新添加");
        }
      });
    },

    //返回上一页
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style scoped lang="scss">
.detail {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 1.173333rem;
  .header-returns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.173333rem;
    div {
      margin: 0 0.266666rem;
      width: 0.933333rem;
      line-height: 0.906666rem;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
    }
    i {
      font-size: 0.693333rem;
      color: #fff;
    }
  }
  .header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.173333rem;
    font-size: 0.426666rem;
    background-color: #fff;
    span {
      padding: 0 0.266666rem;
    }
    i {
      padding: 0 0.266666rem;
      font-size: 0.586666rem;
    }
  }
}
section {
  flex: 1;
  overflow: hidden;
}
.swiper-main {
  position: relative;
  width: 100%;
  height: 10rem;
  overflow: hidden;
}
.swiper-container {
  width: 100%;
  height: 10rem;
}
.swiper-container img {
  width: 100%;
  height: 10rem;
}
.swiper-pagination {
  bottom: 0.266666rem;
  width: 100%;
  text-align: right;
  color: #ffffff;
  font-size: 0.426666rem;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  left: -0.533333rem;
}
.goods-name {
  padding: 0.533333rem 0.266666rem;
  border-bottom: 1px solid #cccccc;
  h1 {
    font-size: 0.533333rem;
    font-weight: 500;
  }
  div {
    padding: 0.08rem 0;
    font-size: 0.373333rem;
    color: #999999;
  }
}
.goods-price {
  padding: 0.533333rem 0.266666rem;
  .oprice {
    color: red;
    span {
      font-size: 0.32rem;
    }
  }
  .pprice {
    color: #999999;
    font-size: 0.373333rem;
  }
}
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.306666rem;
  border-top: 1px solid #cccccc;
  background-color: #fff;
  div {
    width: 50%;
    line-height: 1.306666rem;
    font-size: 0.426666rem;
    text-align: center;
    color: #fff;
    background-color: red;
    &.add-cart {
      background-color: #ff9500;
    }
  }
}
</style>
